<template>
  <div class="page-controller">
    <!-- 查询结果列表区 -->
    <FITable
      class="box-radius2 margin-top20"
      title="子流程实例"
      :id="`result_${tableId}`"
      :data="state.dataList"
      primaryKey="activityInstanceId"
      v-model:columns="columns"
      check-mode="null"
      :isLoading="isTableLoading"
      :saveSuccessful="saveSuccessful"
      :pageConfig="pageConfig"
      :show-save-model="false"
      @table-refresh="searchFn"
      @size-change="handleSizeChange"
      @current-page-change="handleCurrentChange"
      @action-click="handleActionClick"
    >
    </FITable>
    <FITable
      class="box-radius2 margin-top20 margin-bottom20"
      title="子流程活动任务"
      :id="`result_${tableId}2`"
      :data="state.dataListTask"
      primaryKey="id"
      check-mode="null"
      v-model:columns="taskColumns"
      :isLoading="isTableLoadingTask"
      :saveSuccessful="saveSuccessful"
      :pageConfig="pageConfigTask"
      :show-save-model="false"
      @table-refresh="searchFnTask"
      @size-change="handleSizeChangeTask"
      @current-page-change="handleCurrentChangeTask"
    >
    </FITable>
  </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import FITable from '@/components/FITable/index.vue'
import { apiRequestPost } from '@/api/globalApi.js'
import type { PageConfig, Column } from '@/types/components'
import { useRoute } from 'vue-router'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() // 获取当前组件实例上下文
// 路由对象
const route = useRoute()

// 表格是否显示加载中
const isTableLoading = ref(false)
const isTableLoadingTask = ref(false)
// 页面编码
const tableId = 'EWPI04'
// 保存成功按钮状态，默认不展示底部保存，取消按钮
const saveSuccessful = ref(false)

const state = reactive({
  // 查询条件
  query: {
    parentInstanceId: route.query.parentInstanceId,
    name: route.query.name,
    current: 1,
    size: 10,
  },
  // 表格数据
  dataList: [],
  // 查询条件--任务
  queryTask: {
    parentInstanceId: route.query.parentInstanceId,
    instActivity: route.query.name,
    current: 1,
    size: 10,
  },
  // 当前选中活动对应的第一条任务id
  taskId: '',
  // 表格数据--任务
  dataListTask: [],
})
// 页面配置
const pageConfig: PageConfig = reactive({
  //   pageSize: 10,
  //   pageSizes: [10, 20, 50, 100],
  total: 0, // 总条数
  currentPage: 1, // 当前页码
})
// 页面配置
const pageConfigTask: PageConfig = reactive({
  //   pageSize: 10,
  //   pageSizes: [10, 20, 50, 100],
  total: 0, // 总条数
  currentPage: 1, // 当前页码
})
// 表格列数据
const columns: Column[] = reactive([
  {
    label: '流水号',
    prop: 'sequenceId',
    align: 'center',
    width: '120',
  },
  {
    label: '流程主题',
    prop: 'instSubject',
    align: 'center',
    width: '200',
  },
  {
    label: '流程名称',
    prop: 'processDefName',
    align: 'center',
    width: '160',
  },
  {
    label: '发起人',
    prop: 'starter',
    align: 'center',
    width: '150',
  },
  {
    label: '开始时间',
    prop: 'startTime',
    align: 'center',
    width: '160',
    editType: 'date-picker',
  },
  {
    label: '结束时间',
    prop: 'endTime',
    align: 'center',
    width: '160',
    editType: 'date-picker',
  },
  {
    label: '持续时间',
    prop: 'durationStr',
    align: 'center',
    width: '150',
  },
  {
    label: '状态',
    prop: 'instStatus',
    align: 'center',
    width: '100',
    editType: 'select',
    editConfig: {
      options: [
        // 下拉框选项
        { value: 'active', label: '活动' },
        { value: 'suspend', label: '挂起' },
        { value: 'finish', label: '结束' },
        { value: 'manual-finish', label: '终止' },
      ],
    },
  },
  {
    label: '流程实例ID',
    prop: 'processInstanceId',
    align: 'center',
    minWidth: '180',
  },
  {
    label: '',
    prop: 'action',
    actionConfig: [{ id: 'trace', type: '查看流程图' }],
    // actionConfig: [
    //   { label: '明细', type: 'detail' },
    //   { label: '启用', type: 'enable' },
    // ],
    // isCustomAction: false,
  },
])
const taskColumns: Column[] = reactive([
  {
    label: '流水号',
    prop: 'actProcInstanceId',
    align: 'center',
    width: '180',
  },
  {
    label: '任务名称',
    prop: 'name',
    align: 'center',
    width: '200',
  },
  {
    label: '任务ID',
    prop: 'id',
    align: 'center',
    width: '140',
  },
  {
    label: '执行人',
    prop: 'completer',
    align: 'center',
    width: '220',
  },
  {
    label: '状态',
    prop: 'taskStatus',
    align: 'center',
    width: '100',
    editType: 'select',
    editConfig: {
      options: [
        // 下拉框选项
        { value: 'open', label: '活动' },
        { value: 'suspend', label: '已挂起' },
        { value: 'completed', label: '已完成' },
        { value: 'closed', label: '已关闭' },
      ],
    },
  },
  {
    label: '领取状态',
    prop: 'claimStatus',
    align: 'center',
    width: '100',
    editType: 'select',
    editConfig: {
      options: [
        // 下拉框选项
        { value: 'false', label: '未领取' },
        { value: 'true', label: '已领取' },
        { value: 'claimed', label: '被领取' },
      ],
    },
  },
  {
    label: '授权状态',
    prop: 'hasAuth',
    align: 'center',
    width: '120',
    editType: 'select',
    editConfig: {
      options: [
        // 下拉框选项
        { value: 'false', label: '未授权' },
        { value: 'true', label: '已授权' },
      ],
    },
  },
  {
    label: '开始时间',
    prop: 'startTime',
    align: 'center',
    editType: 'date-picker',
    minWidth: '160',
  },
  {
    label: '完成时间',
    prop: 'endTime',
    align: 'center',
    editType: 'date-picker',
    minWidth: '160',
  },
  {
    label: '持续时间',
    prop: 'duration',
    align: 'center',
    minWidth: '160',
  },
  {
    label: '流程实例ID',
    prop: 'processInstanceId',
    align: 'center',
    minWidth: '200',
  },
])

// 分页大小改变回调函数
const handleSizeChange = (e) => {
  pageConfig.pageSize = e
  pageConfig.currentPage = 1
  searchFn()
}
// 分页大小改变回调函数--task
const handleSizeChangeTask = (e) => {
  pageConfigTask.pageSize = e
  pageConfigTask.currentPage = 1
  searchFnTask()
}
// 分页页码改变回调函数
const handleCurrentChange = (e) => {
  pageConfig.currentPage = e
  searchFn()
}
// 分页页码改变回调函数--task
const handleCurrentChangeTask = (e) => {
  pageConfigTask.currentPage = e
  searchFnTask()
}
// 操作按钮回调
const handleActionClick = (item, rowData) => {
  // openUrlFn(item.id, rowData)
}
// 搜索查询函数
const searchFn = () => {
  state.query.current = pageConfig.currentPage
  isTableLoading.value = true
  if (pageConfig.pageSize) state.query.size = pageConfig.pageSize
  const apiUrl = proxy.$Button_api('query', route.name)
  apiRequestPost(apiUrl, state.query)
    .then((res) => {
      isTableLoading.value = false
      if (res.data.success) {
        state.dataList = res.data.data.result
        pageConfig.pageSize = Number(res.data.data.size)
        pageConfig.total = Number(res.data.data.count)
        state.dataListTask = []
        pageConfigTask.currentPage = 1
      } else {
        // useMessage().error(res.data.message)
      }
    })
    .catch((error: any) => {
      isTableLoading.value = false
      // 处理错误
    })
}
// 搜索查询函数--task
const searchFnTask = (type?: string, columnsVal?: any) => {
  state.queryTask.current = pageConfigTask.currentPage
  isTableLoadingTask.value = true
  if (pageConfigTask.pageSize) state.queryTask.size = pageConfigTask.pageSize
  const apiUrl = proxy.$Button_api('queryTask', route.name)
  apiRequestPost(apiUrl, state.queryTask)
    .then((res) => {
      isTableLoadingTask.value = false
      if (res.data.success) {
        state.dataListTask = res.data.data.result
        pageConfigTask.pageSize = Number(res.data.data.size)
        pageConfigTask.total = Number(res.data.data.count)
        if (Array.isArray(state.dataListTask) && state.dataListTask.length > 0) {
          state.taskId = state.dataListTask[0].id
        } else {
          state.taskId = ''
        }
      }
    })
    .catch((error: any) => {
      isTableLoadingTask.value = false
      // 处理错误
    })
}

onMounted(() => {
  searchFn()
  searchFnTask()
})
</script>
<style lang="less" scoped></style>
